@import '../base/var.styl'
@import '../base/extend.styl'
@import '../base/mixin.styl'

.timeline-list
  .item
    margin-bottom: 10px
    &:hover
      .link
        .item-content
          .item-title
            background: $c-theme
            color: #fff
    .link
      display: flex
      .time
        text-align: center
        transform: translateY(-10px)
        .dd
          font-size: 36px
          color: $c-theme
          font-weight: bold
        .yyyy-mm
          font-size: 14px
          color: #333333
          margin-top: 10px
      .split
        display: flex
        flex-direction: column
        align-items: center
        margin: 0 10px
        .marker
          display: inline-block
          width: 28px
          height: 28px
          border-radius: 50%
          background: #fff
          box-shadow: inset 0 0 0 6px $c-theme
          margin-bottom: 10px
        .line
          flex: 1
          width: 2px
          background: #cccccc
      .item-content
        flex: 1
        padding-bottom: 45px
        overflow: hidden
        .item-title
          display: inline-block
          vertical-align: top
          max-width: 100%
          font-size: 14px
          color: #1a1a1a
          padding: 0 20px
          line-height: 30px
          background: #e88f8f
          border-radius: 15px
          transition: 300ms
          @extend .ellipsis
        .item-desc
          margin-top: 1em
          font-size: 14px
          color: #666666
          line-height: 1.5
          max-height: 4.5em
          multi-ellipsis(3)